<template>
    <div style="height: 88vh;width: 100%;">
<!--        侧边栏-->
        <el-row style="height: 100%;width: 100%"  :gutter="20">
            <el-col :span="4" style="height: 100%">
                <el-menu
                        style="height: 85vh;overflow-y: scroll"
                        :default-active="defaultActiveIndex"
                        background-color="#ffffff"
                        class="el-menu-vertical-demo">
                    <el-menu-item v-for="(inform,index) in informData" :key="index" :index="index" @click="toViewInform(inform)">
                        <span slot="title">{{inform.title}}</span>
                    </el-menu-item>

                </el-menu>
            </el-col>
            <el-col :span="20"  style="height: 100%;">
                <el-card class="informContentCard">
                    <div slot="header">
                        <el-tag>{{currentInform.userNickname}}</el-tag>
                        <div style="height: 100%;display: inline-block;float: right; padding: 3px 0">
                            <i class="el-icon-view" ></i>
                            <span class="marginLR">{{currentInform.hitsNum}}</span>
                        </div>
<!--                        <span  style="display: inline-block;float: right; padding: 3px 0">-->
<!--                            <i class="el-icon-view iconStyle" ></i>-->
<!--                            -->
<!--                        </span>-->
                    </div>
                    <div class="informContentStyle">
                        <span >
                            {{currentInform.content}}
                        </span>
                    </div>
                </el-card>
            </el-col>
        </el-row>

    </div>
</template>

<script>
    export default {
        name: "InformManage",
        data(){
            return{
                informData:[],      //所有的通知信息
                currentInform:{},   //当前选中的inform信息
                id:(this.$route.query.id!=null)?this.$route.query.id:null ,      //当前选中Inform的Id(为了方便跳转到该界面展示特定通知)
                defaultActiveIndex:0,   //菜单默认选择的下标
            }
        },
        created() {
            this.queryAllInforms();
        },
        methods:{
            //展示通知数据
            toViewInform(inform){
                this.currentInform=inform;
                this.addHitsNum(inform.id);

            },
            //增加点击量
            addHitsNum(informId){
                this.request.get("/index/inform/addHitsNum",{
                    params:{
                        id:informId,
                    }
                }).then(res=>{
                    if (res.code=="200"){
                        this.currentInform.hitsNum+=1;
                    }
                })

            },
            //加载通知数据
            queryAllInforms(){
                this.request.get("/index/inform/queryAllInforms",{
                    params:{
                        queryTitleLike: this.queryTitleLike,
                        pageIndex: this.pageIndex,
                        pageSize: this.pageSize,
                        orderByCreateTime: "createTime_desc",
                    }
                }).then(res=>{
                    if (res.code=="200"){
                        this.informData=res.data.informs;
                        if (this.id!=null){             //当前界面由其他界面跳转而来
                            this.informData.forEach((inform,index)=>{
                                if (inform.id==this.id){
                                    this.currentInform=inform;
                                    this.defaultActiveIndex=index;
                                }
                            })
                        }else{
                            this.currentInform=this.informData[0];
                        }
                        // console.log(this.currentInform);
                        this.id=null;
                    }else if(res.code=="301"){
                        this.$message({
                            message: res.data,
                            type: 'warning'
                        });
                    }
                })
            },
        }
    }
</script>

<style scoped>

    .informContentCard{
        height: 85vh;
    }

    .informContentStyle{
        color: #303133;
        font-size: 20px;
        line-height: 35px;
        text-indent: 2em;
    }
    /*超过两行省略号*/
    .lineHeightLimit{
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 15;
        -webkit-box-orient: vertical;
    }


</style>